<template>
	<view class="main">
	<view v-for="item in foodData" :key="item.sid" class="goods-list">
		<view class="categoty-name">商品类型：{{item.categoryName}}</view>
		<view class="goods">
			<image :src='item.gphoto' class="goods-img"></image>
			<view class="goods-decs">
				<view class="aa">商品名称：{{item.gname}}</view>
				<view class="aa">商品单价：{{item.goodsPrice}}</view>
				<view class="aa">商品销量：{{item.goodsStock}}</view>
				<!-- <view class="aa">商品详情：<br/>{{item.goodsSpecs}}</view> -->
			</view>	
		</view>
	</view>
	</view>
</template>

<script setup lang="ts">
import {defineProps} from "vue"

const prop = defineProps({
	foodData:{
		type:Object,
		required:true
	}
})

</script>

<style lang="scss">
.main{
	background-color: rgb(255, 250, 232);
}
.goods-list{
	margin: 20rpx 0;
	background-color: #fff;
	padding: 20rpx 6rpx;
	border-radius: 30rpx;
}
.goods{
	display: flex;
	margin: 6rpx 0 ;
	> .goods-img{
		width: 300rpx;
		height: 250rpx;
	}
	> .goods-decs{
		width: 400rpx;
		margin-left: 20rpx;
	}
}
.aa{
	margin: 20rpx 0;
}
</style>
